<template>
  <div>
    <div class="row-between-center">
      <van-dropdown-menu class="w-full" v-if="props.showMenu">
        <van-dropdown-item
          v-if="props.showGames"
          v-model="searchParams.LotteryId"
          :options="gameOptions"
          @change="handleSearch"
        />
        <van-dropdown-item
          v-if="props.showStatus"
          v-model="searchParams.Type"
          :options="statusOptions"
          @change="handleSearch"
        />
      </van-dropdown-menu>
    </div>
    <!-- 搜索区 -->
    <div class="flex items-center justify-between bg-white px-[15px]">
      <van-search
        class="!flex-1"
        v-if="props.showName"
        @search="handleSearch"
        @clear="handleSearch"
        @click-left-icon="handleSearch"
        :clearable="false"
        v-model="searchParams.Name"
        placeholder="请输入用户名/昵称"
        shape="round"
      />
      <div class="w-[15px]" v-if="props.showName && (props.showIssue || props.showIp)"></div>
      <van-search
        class="!flex-1"
        v-if="props.showIssue"
        @search="handleSearch"
        @clear="handleSearch"
        :clearable="false"
        @click-left-icon="handleSearch"
        v-model="searchParams.Issue"
        placeholder="请输入期号"
        shape="round"
      />
      <van-search
        class="!flex-1"
        v-if="props.showIp"
        @search="handleSearch"
        @clear="handleSearch"
        :clearable="false"
        @click-left-icon="handleSearch"
        v-model="searchParams.Issue"
        placeholder="请输入ip地址"
        shape="round"
      />
    </div>
    <div v-if="showDateRange" class="mt-[10px] h-auto bg-white py-[10px] box-border">
      <div v-if="showDateTabs" class="mx-[15px] mb-[11px]" >
        <custom-tabs v-model:value="activeDateRange" :options="statusType" />
      </div>
      <div class="time-box">{{ startDate }}~{{ endDate }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useGameStore } from "@/store/modules/game";
import { storeToRefs } from "pinia";
import moment from "moment";
import { getDateArray } from "@/utils/common";

const props = withDefaults(
  defineProps<{
    statusOptions?: { text: string; value: string }[];
    showMenu?: boolean;
    showName?: boolean;
    showIssue?: boolean;
    showGames?: boolean,
    showStatus?: boolean;
    showDateRange?: boolean;
    showDateTabs?: boolean;
    showIp?: boolean;
  }>(),
  {
    showMenu: true,
    showName: true,
    showIssue: true,
    showGames: true,
    showStatus: true,
    showDateRange: true,
    showDateTabs: true,
    showIp: false
  }
);

const searchParams = inject<SearchParams>("searchParams") as SearchParams;
const statusType = [
  { text: "今天", value: "today" },
  { text: "昨天", value: "yesterday" },
  { text: "本周", value: "thisWeek" },
  { text: "上周", value: "lastWeek" }
];

const gameStore = useGameStore();
const { gameTotal } = storeToRefs(gameStore);

const startDate = computed(() => {
  return moment(searchParams.date[0]).format("YYYY-MM-DD");
});
const endDate = computed(() => {
  return moment(searchParams.date[1]).format("YYYY-MM-DD");
});

const emits = defineEmits(["search"]);
const activeDateRange = ref("today");

const gameOptions = computed(() => {
  console.log(gameTotal.value, "gameTotal");
  // return []
  return [{ text: "全部游戏", value: -1 }].concat(
    gameTotal.value.map(v => {
      return {
        text: v.Name,
        value: v.LotteryId
      };
    })
  );
});

const handleSearch = () => {
  emits("search");
};

const getDate = () => {
  const date: Record<string, string[]> = getDateArray();
  return date;
};

watch(
  () => activeDateRange.value,
  val => {
    searchParams.date = [new Date(getDate()[val][0]), new Date(getDate()[val][1])];
    nextTick(handleSearch);
  }
);
</script>

<style scoped>
.time-box {
  background-color: #f6f9fe;
  border-radius: 10px;
  @apply text-[14px] w-[345px] h-[26px] ml-[15px]  text-[#111] row-center-center;
}
</style>
<style scoped lang="scss">
:deep() {
  .van-dropdown-menu {
    --van-dropdown-menu-height: 30px;
    .van-dropdown-menu__bar {
      padding: 6px 0;
      box-shadow: none;
      .van-dropdown-menu__item:first-child {
        border-right: 1px solid #e4e4e4;
      }
    }
    .van-dropdown-item__content {
      border-top: 1px solid #e4e4e4;
    }
  }
}
.van-search {
  padding: 10px 0;
}
</style>
